<template>
  <view class="container">
    <!-- 小程序头部兼容 -->
<!--    <view class="mp-search-box">-->
<!--      <input class="ser-input" type="text" value="输入关键字搜索" disabled />-->
<!--    </view>-->
    <!-- 头部轮播 -->
    <view class="carousel-section">
      <!-- 标题栏和状态栏占位符 -->
      <view class="titleNview-placing"></view>
      <!-- 背景色区域 -->
      <view class="titleNview-background" :style="{backgroundColor:titleNViewBackground}"></view>
      <swiper class="carousel" circular @change="swiperChange">
        <swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item" @click="navToDetailPage({title: '轮播广告'})">
          <image :src="item.src" />
        </swiper-item>
      </swiper>
      <!-- 自定义swiper指示器 -->
<!--      <view class="swiper-dots">-->
<!--        <text class="num">{{swiperCurrent+1}}</text>-->
<!--        <text class="sign">/</text>-->
<!--        <text class="num">{{swiperLength}}</text>-->
<!--      </view>-->
    </view>
    <!-- 分类 -->
    <view class="cate-section">
      <view class="cate-item" >
        <image :src="`${proxyUrl}/static/temp/rzdj.png`" @click="cateItem('0')"></image>
        <text>入职登记</text>
      </view>
      <view class="cate-item"  @click="cateItem('1')">
        <image :src="`${proxyUrl}/static/temp/zsdj.png`"></image>
        <text>住宿登记</text>
      </view>
      <view class="cate-item"  @click="cateItem('2')">
        <image :src="`${proxyUrl}/static/temp/zsdj.png`"></image>
        <text>退宿申请</text>
      </view>
      <view class="cate-item" @click="cateItem('3')">
        <image :src="`${proxyUrl}/static/temp/tssq.png`"></image>
        <text>维修申请</text>
      </view>
      <view class="cate-item" @click="cateItem('6')">
        <image :src="`${proxyUrl}/static/temp/niming.png`"></image>
        <text>匿名举报</text>
      </view>
      <view class="cate-item" @click="cateItem('7')">
        <image :src="`${proxyUrl}/static/temp/dasao.png`"></image>
        <text>卫生清扫</text>
      </view>
      <view class="cate-item" @click="cateItem('4')">
        <image :src="`${proxyUrl}/static/temp/gongzi.png`"></image>
        <text>预支工资</text>
      </view>
      <view class="cate-item" @click="cateItem('5')">
        <image :src="`${proxyUrl}/static/temp/zbsq.png`"></image>
        <text>我的工资</text>
      </view>

    </view>

    <view class="ad-1">
      <image :src="`${proxyUrl}/static/temp/ad1.jpg`" mode="scaleToFill"></image>
    </view>

    <!-- 猜你喜欢 -->
    <view class="f-header m-t"  @click="toStore">
      <image src="/static/temp/h1.png"></image>
      <view class="tit-box">
        <text class="tit">骑手商城</text>
        <text class="tit2">Guess You Like It</text>
      </view>
      <text class="yticon icon-you"></text>
    </view>

    <view class="guess-section">
      <view
        v-for="(item, index) in goodsList" :key="index"
        class="guess-item"
        @click="navToDetailPage(item)"
      >
        <view class="image-wrapper">
          <image :src="getUrl(item.ridersShoppingMatialList)" mode="aspectFill"></image>
        </view>
        <text class="title clamp">{{item.equipment}}</text>
        <!-- <text class="price">￥{{item.price}}</text> -->
      </view>
    </view>

    <u-mask :show="qrCodeShow" :custom-style="{background: 'rgba(0, 0, 0, 0.7)'}"></u-mask>
    <u-modal  v-model="qrCodeShow" :title-style="{color: 'red'}" :title="'请长按二维码识别'" :cancel-text="'取 消'" :show-confirm-button="false" :show-cancel-button="true">
      <view class="slot-content" style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
        <u-image width="450rpx" height="450rpx" :src="qrCodeUrl"></u-image>
        <text style="font-size: 26rpx;color: red;margin: 10rpx;">请长按图片识别二维码，进行注册操作。</text>
      </view>
    </u-modal>

  </view>
</template>

<script>
import {getQueryString, getQrCodeId,getQrType} from "@/utils/index.js";
import store from "@/store";
import {isEmpty} from "../../utils";
import * as consts from "@/utils/constant.js";

export default {

  data() {
    return {
      titleNViewBackground: '',
      swiperCurrent: 0,
      swiperLength: 0,
      carouselList: [],
      goodsList: [],
      wx_code:0,
      isSg:false,
      proxyUrl:(window.location.href.includes('/xsdcrm-wechat-ui/')?'/xsdcrm-wechat-ui/': ''),
      qrCodeShow:false,
      qrCodeUrl:'',
      cleaning:0
    };
  },
  onLoad(option) {

    this.loadData();
    if (!isEmpty(option.onboarding)) {
      this.getYmJump(JSON.parse(uni.getStorageSync("onboarding")))
      return
    }
    this.isSg = uni.getStorageSync("isAdmin")?uni.getStorageSync("isAdmin"):JSON.parse(option.isSg?option.isSg:false)
    if (this.isSg != true ) uni.setStorageSync("isAdmin",'');
    uni.setStorageSync("loadSignPDF",'')
    this.getOpid()

  },
  async created() {

    const oScript = document.createElement('script');
    oScript.type = 'text/javascript';
    oScript.src = 'https://res2.wx.qq.com/open/js/jweixin-1.6.0.js';
    document.body.appendChild(oScript);
    oScript.onload = this.wxmini
  },
  methods: {
    toStore() {
      uni.navigateTo({
        url: `/pages/product/list`
      })
    },
      getUrl(list){
        let str
        if (list && list.length>0) {
          str = (process.env.VUE_APP_ENV == 'dev'?'http://testcrm.xinlanrenli.com':this.proxyUrl) +'/profile/'+ list[0].matialUri
        } else {
          str = this.proxyUrl + '/static/zwtp.png'
        }
        console.log(str)
        return str
      },
      async getOpid(){
      const that = this;
      let openId = uni.getStorageSync("openId");
      let token = uni.getStorageSync("token");
      let token2 = uni.getStorageSync("token2");
      let isAdmin = uni.getStorageSync("isAdmin");
      if (isEmpty(token) && !isEmpty(token2)) {
        uni.setStorageSync("token",token2)
        token = token2
      }
      this.wx_code = getQueryString("code");
      let code = this.wx_code
      if (!isEmpty(code) && isEmpty(store.getters.openId)) {
      //微信免登录
       await this.$api.user
          .withoutLoginZs({
            code,
            // inductionType: inductionType
          })
          .then(async (res) => {
            let {data} = res;
            if (data) {
              //成功
              data.openid && store.commit("UPDATE_OPENID", data.openid);
              uni.setStorageSync("token", data.token);
              uni.setStorageSync("token2", data.token);
              uni.setStorageSync("openId", data.openid);
              openId = uni.getStorageSync("openId");
              if (this.isSg) {
                // uni.setStorageSync("isAdmin",true)
                let res2 = await this.$api.dormitory.getSysUserByOpenId(data.openid)
                if (isEmpty(res2.data)) {
                  uni.setStorageSync("token", "");
                  uni.redirectTo({
                    url:'/pages/HomePage/login/webIndex?isSg=true'
                  })
                  return
                }

                if (!isEmpty(res2.data)){
                  uni.setStorageSync("isAdmin",true)
                }
              } else {
                uni.setStorageSync("isAdmin",'')
              }
              info()
            } else if (data.loginFlag == "2") {
              // //失败
              // store.commit("UPDATE_OPENID", data.openid);
              // store.commit("UPDATE_ROUTEURL", "/pages/register/index");
            }
          })
      } else {
        info()
      }

      async function info() {
        uni.showLoading({
          title: '加载中',
          mask: true,
        });
        // if ((isEmpty(isAdmin) || isAdmin == false || isAdmin == 'false' ) && that.isSg) {
        if (that.isSg) {
          // uni.setStorageSync("isAdmin",true)
          if (!isEmpty(openId)) {
            uni.setStorageSync("cleaningName",'')
            uni.setStorageSync("securityOfficer",'')
            uni.setStorageSync("isAdmin",'')
            let res2 = await that.$api.dormitory.getSysUserByOpenId(openId)
            if (isEmpty(res2.data)) {
              uni.setStorageSync("token", "");
              uni.redirectTo({
                url:'/pages/HomePage/login/webIndex?isSg=true'
              })
              return
            }
            if (!isEmpty(res2.data) && res2.role){
              res2.role.forEach(v =>{
                if (v.roleKey ==  'supervisor'){
                  uni.setStorageSync("isAdmin",true)
                  return
                }
                if (v.roleKey ==  'riders_health'){
                  uni.reLaunch({
                    url: `/pages/serve/cleaning/loginWebIndex?role=3`
                  })
                  uni.setStorageSync("securityOfficer",res2.data)
                  return
                }
                if (v.roleKey ==  'riders_cleaning'){
                  uni.reLaunch({
                    url: `/pages/serve/cleaning/loginWebIndex?role=2`
                  })
                  uni.setStorageSync("cleaningName",res2.data)
                  return
                }
              })
            }

            let {data} = await that.$api.dormitory.listCity();

            uni.getLocation({
              type: 'wgs84',
              accuracy: 'best',
              isHighAccuracy: true,
              success: ((res)=> {
                let latitude = res.latitude;
                let longitude = res.longitude;
                console.log('WGS84 坐标：',res, latitude, longitude);
                // 转换为百度坐标
                let bd09Coords = that.wgs84ToBd09(longitude,latitude );
                console.log('BD-09 坐标：', bd09Coords.latitude, bd09Coords.longitude);
                // 创建百度地图的 geocoder 实例
                uni.request({
                  url: `${(window.location.href.includes('/xsdcrm-wechat-ui/')?'':'http://testcrm.xinlanrenli.com')}/baidu/reverse_geocoding/v3/?ak=Leli2xz93izZuLaGQ1ElztktyLIa1ecq&output=json&coordtype=bd09ll&location=${bd09Coords.latitude},${bd09Coords.longitude}`,
                  method: 'GET',
                  success: (res) => {
                    console.error('获取地址', res);
                    if (res.data.status === 0) {
                      data.forEach(v=>{
                        if (res.data.result.addressComponent.city.includes(v.cityName)){
                          res.data.cityId = v.cityId
                        }
                      })
                      uni.setStorageSync('city',res.data)
                    } else {
                      console.error('获取地址失败', res.data);
                      uni.setStorageSync('city','获取地址失败'+res.data)
                    }
                  },
                  fail: (err) => {
                    console.error('请求失败', err);
                  }
                });
              }),
              fail:(e=>{
                console.log(e)
              })
            });


            let cityId = uni.getStorageSync("city")?uni.getStorageSync("city").cityId:''
            let goodsList = await that.$api.dormitory.equipmentList({cityId:cityId});
            that.goodsList = goodsList.rows || [];

            uni.hideLoading();

          } else {
            uni.setStorageSync("token", "");
            uni.redirectTo({
              url:'/pages/HomePage/login/webIndex?isSg=true'
            })
          }
          return
        } else {
          if (!isEmpty(openId)) {
            let res2 = await that.$api.dormitory.selectWxUserByOpenId(openId,3)
            if (isEmpty(res2.data.riderRoster.idCardNo) && isEmpty(res2.data.sysWechatUser.idCardNo) ) {
              uni.setStorageSync("token", "");
              uni.redirectTo({
                url:'/pages/HomePage/login/webIndex?isWX=1'
              })
              return
            }

            if (!isEmpty(res2.data.riderRoster.idCardNo)){
              uni.setStorageSync("idCardPopup",res2.data.riderRoster.idCardNo)
            } else {
              uni.setStorageSync("idCardPopup",'')
            }

            if (!isEmpty(res2.data.riderRoster)){
              uni.setStorageSync("riderRoster",res2.data.riderRoster)
            }

            let {data} = await that.$api.dormitory.listCity()
            uni.getLocation({
              type: 'wgs84',
              isHighAccuracy:true,
              accuracy: 'best',
              success: ((res)=> {
                let latitude = res.latitude;
                let longitude = res.longitude;
                console.log('wgs84 坐标：', latitude, longitude);
                // 转换为百度坐标
                // let bd09Coords = that.wgs84ToBd09(longitude,latitude );
                // console.log('BD-09 坐标：', bd09Coords.latitude, bd09Coords.longitude);
                // 创建百度地图的 geocoder 实例
                uni.request({
                  url: `/baidu/reverse_geocoding/v3/?ak=Leli2xz93izZuLaGQ1ElztktyLIa1ecq&output=json&coordtype=wgs84ll&location=${latitude},${longitude}`,
                  method: 'GET',
                  success: (res) => {
                    if (res.data.status === 0) {
                      console.error('获取地址成功', res.data);
                      data.forEach(v=>{
                        if (res.data.result.addressComponent.city.includes(v.cityName)){
                          res.data.cityId = v.cityId
                        }
                      })
                      uni.setStorageSync('city',res.data)
                    } else {
                      console.error('获取地址失败', res.data);
                      uni.setStorageSync('city','获取地址失败'+res.data)
                    }
                  },
                  fail: (err) => {
                    console.error('请求失败', err);
                  }
                });
              }),
              fail:(e=>{
                console.log(e)
              })
            });

            let cityId = uni.getStorageSync("city")?uni.getStorageSync("city").cityId:''
            let goodsList = await that.$api.dormitory.equipmentList({cityId:cityId});
            that.goodsList = goodsList.rows || [];

            uni.hideLoading();

          } else {
            uni.setStorageSync("token", "");
            uni.redirectTo({
              url:'/pages/HomePage/login/webIndex?isWX=1'
            })
          }
        }
      }


    },
    wgs84ToBd09(lng, lat) {
        // 常量
        const x_pi = Math.PI * 3000.0 / 180.0;

        // 判断是否在国内范围
        function outOfChina(lng, lat) {
          if (lng < 72.004 || lng > 137.8347 || lat < 0.8293 || lat > 55.8271) {
            return true;
          }
          return false;
        }

        // 转换函数
        function transform(wgsLng, wgsLat) {
          if (outOfChina(wgsLng, wgsLat)) {
            return { lng: wgsLng, lat: wgsLat };
          }

          const dLat = transformLat(wgsLng - 105.0, wgsLat - 35.0);
          const dLng = transformLng(wgsLng - 105.0, wgsLat - 35.0);
          const radLat = wgsLat / 180.0 * Math.PI;
          const magic = Math.sin(radLat);
          const magic2 = 1 - ee * magic * magic;
          const sqrtMagic = Math.sqrt(magic2);
          const dLatRad = (dLat * 180.0) / ((a * (1 - ee)) / (magic2 * sqrtMagic) * Math.PI);
          const dLngRad = (dLng * 180.0) / (a / sqrtMagic * Math.cos(radLat) * Math.PI);
          const mgLat = wgsLat + dLatRad;
          const mgLng = wgsLng + dLngRad;
          return { lng: mgLng, lat: mgLat };
        }

        function transformLat(lng, lat) {
          const a = 6378245.0;
          const ee = 0.006693421622965943;
          let ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng));
          ret += (20.0 * Math.sin(6.0 * lng * Math.PI) + 20.0 * Math.sin(2.0 * lng * Math.PI)) * 2.0 / 3.0;
          ret += (20.0 * Math.sin(lat * Math.PI) + 40.0 * Math.sin(lat / 3.0 * Math.PI)) * 2.0 / 3.0;
          ret += (160.0 * Math.sin(lat / 12.0 * Math.PI) + 320.0 * Math.sin(lat * Math.PI / 30.0)) * 2.0 / 3.0;
          return ret;
        }

        function transformLng(lng, lat) {
          const a = 6378245.0;
          const ee = 0.006693421622965943;
          let ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));
          ret += (20.0 * Math.sin(6.0 * lng * Math.PI) + 20.0 * Math.sin(2.0 * lng * Math.PI)) * 2.0 / 3.0;
          ret += (20.0 * Math.sin(lng * Math.PI) + 40.0 * Math.sin(lng / 3.0 * Math.PI)) * 2.0 / 3.0;
          ret += (150.0 * Math.sin(lng / 12.0 * Math.PI) + 300.0 * Math.sin(lng / 30.0 * Math.PI)) * 2.0 / 3.0;
          return ret;
        }

        // WGS84转GCJ02坐标
        function wgs84ToGcj02(wgsLng, wgsLat) {
          const { lng, lat } = transform(wgsLng, wgsLat);
          return { lng: lng, lat: lat };
        }

        // GCJ02转BD09坐标
        function gcj02ToBd09(gcjLng, gcjLat) {
          const z = Math.sqrt(gcjLng * gcjLng + gcjLat * gcjLat) + 0.00002 * Math.sin(gcjLat * x_pi);
          const theta = Math.atan2(gcjLat, gcjLng) + 0.000003 * Math.cos(gcjLng * x_pi);
          const bdLng = z * Math.cos(theta) + 0.0065;
          const bdLat = z * Math.sin(theta) + 0.006;
          return { longitude: bdLng, latitude: bdLat };
        }

        // WGS84 to BD09 conversion
        const gcj02 = wgs84ToGcj02(lng, lat);
        const bd09 = gcj02ToBd09(gcj02.lng, gcj02.lat);
        return bd09;
    },
    wxmini(){
      var urlString = encodeURIComponent(location.href.split('#')[0])
      console.log(urlString)
      // 获取密钥
      this.$api.dormitory.getSdk(urlString).then(res=>{
        if (res.code == 300){
          this.wxmini()
        }

        const configData = res.data
        console.log(configData)
        jWeixin.config({ // eslint-disable-line
          // debug: true,
          appId: configData.appid, // 必填，公众号的唯一标识
          timestamp: configData.timestamp, // 必填，生成签名的时间戳
          nonceStr: configData.noncestr, // 必填，生成签名的随机串
          signature: configData.signature,
          jsApiList: ["wx-open-launch-weapp","scanQRCode"], // 必填，需要使用的JS接口列表
          openTagList: ['wx-open-launch-weapp'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
        });

        jWeixin.ready(function () {
          console.log('ready')
        });

        jWeixin.error(function (e) {
          console.log('error',e)
        });
      })
    },
    async getYmJump(str){
      // 创建 URL 对象
      const urlObject = new URL(str);
      // 获取 URL 参数
      const params = new URLSearchParams(urlObject.search);
      // 将参数转换为对象
      const paramsObject = {};
      params.forEach((value, key) => {
        paramsObject[key] = value;
      });

      if (str && paramsObject.idCardNo && paramsObject.deptId) {
        let params = {
          certno:paramsObject.idCardNo,
          deptId:paramsObject.deptId
        }
        uni.setStorageSync("abutmentVo",'')
        let res2 = await this.$api.dormitory.getYmJump(params)
        if (res2.jump == true || res2.jump == 'true') {
          uni.setStorageSync("abutmentVo",'')
          store.commit("ABUTMENTVO", [])
          this.qrCodeUrl = (window.location.href.includes('/xsdcrm-wechat-ui/')?consts.API_BASE_URL+'/xsdcrm-static/upload/': '/profile/') +  res2.ymUrl
          this.qrCodeShow = true
        } else {
          if (res2.abutmentVo && res2.abutmentVo.data) {
            uni.setStorageSync("abutmentVo", res2.abutmentVo.data);
          }
          let url = str.replace('?deptId','?isHomePage=1&deptId')
          if (url.includes('&code')) {
            let result = url.split("&code")[0];
            window.location.href = result
          } else {
            window.location.href = url
          }
        }
      } else {
        uni.showToast({
          title: "相关链接无法识别或链接中缺少必要参数",
          icon: "none",
        });
      }

    },
    cateItem(item){
      console.log('点击功能按钮')
      if (item == 0) {
        jWeixin.scanQRCode({
          needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
          scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
          success: async (res) => {
            //扫码返回的结果
            let data_code = res.resultStr
            let str = data_code;
            // 创建 URL 对象
            const urlObject = new URL(str);
            // 获取 URL 参数
            const params = new URLSearchParams(urlObject.search);
            // 将参数转换为对象
            const paramsObject = {};
            params.forEach((value, key) => {
              paramsObject[key] = value;
            });

            if (str && paramsObject.idCardNo && paramsObject.deptId) {
              this.getYmJump(str)
            } else {
              uni.showToast({
                title: "相关链接无法识别或链接中缺少必要参数",
                icon: "none",
              });
            }
          }
        });
      } else if (item == 1) {
        jWeixin.scanQRCode({
          needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
          scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
          success: (res) => {
            //扫码返回的结果
            let data_code = res.resultStr
            let str = data_code;
            let match = str.match(/[?&]bedId=([^&]+)/);
            if (match) {
              let bedIdValue = match[1];
              console.log(bedIdValue); // 输出 "1"
              uni.navigateTo({
                url: `/pages/HomePage/checkIn/webIndex?bedId=${bedIdValue}`
              })
            } else {
              uni.showToast({
                title: "未查询到床位信息",
                icon: "none",
              });
            }

          },
          cancel: () => {
            console.log('err', res);

          },
        });

      } else if (item == 2) {
        jWeixin.scanQRCode({
          needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
          scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
          success: (res) => {
            //扫码返回的结果
            let data_code = res.resultStr
            let str = data_code;
            let match = str.match(/[?&]bedId=([^&]+)/);
            if (match) {
              let bedIdValue = match[1];
              console.log(bedIdValue); // 输出 "1"
              uni.navigateTo({
                url: `/pages/HomePage/checkOut/webIndex?bedId=${bedIdValue}`
              })
            } else {
              console.log("未找到匹配的参数值");
              uni.showToast({
                title: "未查询到床位信息",
                icon: "none",
              });
            }
          },
          cancel: () => {
            console.log('err', res);

          },
        });
      } else if (item == 3) {
        jWeixin.scanQRCode({
          needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
          scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
          success: (res) => {
            //扫码返回的结果
            let data_code = res.resultStr
            let str = data_code;
            let match = str.match(/[?&]id=([^&]+)/);
            if (match) {
              let dormitoryId = match[1];
              console.log(dormitoryId); // 输出 "1"
              uni.navigateTo({
                url: `/pages/HomePage/repair/webIndex?dormitoryId=${dormitoryId}`
              })
            } else {
              console.log("未找到匹配的参数值");
              uni.showToast({
                title: "未查询到宿舍信息",
                icon: "none",
              });
            }
          },
          cancel: () => {
            console.log('err', res);

          },
        });
      } else if (item == 4)  {

      } else if (item == 5)  {
        uni.navigateTo({
          url: '/pages/user/salary-webIndex'
        })
      } else if (item == 6)  {
        uni.navigateTo({
          url: `/pages/HomePage/anonymous/webIndex`
        })
      } else if (item == 7)  {
        jWeixin.scanQRCode({
          needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
          scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
          success: async (res) => {
            //扫码返回的结果
            let data_code = res.resultStr
            let str = data_code;
            let match = str.match(/[?&]id=([^&]+)/);
            if (match) {
              let dormitoryId = match[1];
              console.log(dormitoryId); // 输出 "1"
              
                uni.navigateTo({
                  url: `/pages/HomePage/sweep/webIndex?dormitoryId=${dormitoryId}`
                })
              } else {
                uni.showToast({
                  title: "宿舍卫生打扫已申请",
                  icon: "none",
                });
              }
          },
          cancel: () => {
            console.log('err', res);

          },
        });
      } else if (item == 4)  {

      }
    },
    /**
     * 请求静态数据只是为了代码不那么乱
     * 分次请求未作整合
     */
    async loadData() {
      let carouselList = await this.$API.json('carouselList');
      this.titleNViewBackground = carouselList[0].background;
      this.swiperLength = carouselList.length;
      this.carouselList = carouselList;

      // let goodsList = await this.$API.json('goodsList');
      // this.goodsList = goodsList || [];


    },
    //轮播图切换修改背景色
    swiperChange(e) {
      const index = e.detail.current;
      this.swiperCurrent = index;
      this.titleNViewBackground = this.carouselList[index].background;
    },
    //详情页
    navToDetailPage(item) {
      let id = item.equipmentId;
      let cityId = uni.getStorageSync("city")?uni.getStorageSync("city").cityId:''
      uni.navigateTo({
        url: `/pages/product/product?id=${id}&cityId=${cityId}`
      })
    },
  },
  // #ifndef MP
  // 标题栏input搜索框点击
  onNavigationBarSearchInputClicked: async function(e) {
    this.$API.msg('点击了搜索框');
  },
  //点击导航栏 buttons 时触发
  onNavigationBarButtonTap(e) {
    const index = e.index;
    if (index === 0) {
      this.$API.msg('点击了扫描');
    } else if (index === 1) {
      // #ifdef APP-PLUS
      const pages = getCurrentPages();
      const page = pages[pages.length - 1];
      const currentWebview = page.$getAppWebview();
      currentWebview.hideTitleNViewButtonRedDot({
        index
      });
      // #endif
      uni.navigateTo({
        url: '/pages/notice/notice'
      })
    }
  }
  // #endif
}
</script>

<style lang="scss">
/* #ifdef MP */
.mp-search-box{
  position:absolute;
  left: 0;
  top: 30upx;
  z-index: 9999;
  width: 100%;
  padding: 0 80upx;
  .ser-input{
    flex:1;
    height: 56upx;
    line-height: 56upx;
    text-align: center;
    font-size: 28upx;
    color:$font-color-base;
    border-radius: 20px;
    background: rgba(255,255,255,.6);
  }
}
page{
  .cate-section{
    position:relative;
    z-index:5;
    border-radius:16upx 16upx 0 0;
    margin-top:-20upx;
  }
  .carousel-section{
    padding: 0;
    .titleNview-placing {
      padding-top: 0;
      height: 0;
    }
    .carousel{
      .carousel-item{
        padding: 0;
      }
    }
    .swiper-dots{
      left:45upx;
      bottom:40upx;
    }
  }
}
/* #endif */


page {
  background: #f5f5f5;
}
.m-t{
  margin-top: 16upx;
}
/* 头部 轮播图 */
.carousel-section {
  position: relative;
  padding-top: 10px;

  .titleNview-placing {
    height: var(--status-bar-height);
    padding-top: 44px;
    box-sizing: content-box;
  }

  .titleNview-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 426upx;
    transition: .4s;
  }
}
.carousel {
  width: 100%;
  height: 350upx;

  .carousel-item {
    width: 100%;
    height: 100%;
    padding: 0 28upx;
    overflow: hidden;
    box-sizing: border-box;
  }

  image {
    width: 100%;
    height: 100%;
    border-radius: 10upx;
  }
}
.swiper-dots {
  display: flex;
  position: absolute;
  left: 60upx;
  bottom: 15upx;
  width: 72upx;
  height: 36upx;
  background-image: url();
  background-size: 100% 100%;

  .num {
    width: 36upx;
    height: 36upx;
    border-radius: 50px;
    font-size: 24upx;
    color: #fff;
    text-align: center;
    line-height: 36upx;
  }

  .sign {
    position: absolute;
    top: 0;
    left: 50%;
    line-height: 36upx;
    font-size: 12upx;
    color: #fff;
    transform: translateX(-50%);
  }
}
/* 分类 */
.cate-section {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap:wrap;
  padding: 30upx 22upx;
  background: #fff;
  .cate-item {
    width:25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: $font-sm + 2upx;
    color: $font-color-dark;
    &:nth-of-type(5),&:nth-of-type(6),&:nth-of-type(7),&:nth-of-type(8){
      margin-top: 20rpx;
    }
  }
  /* 原图标颜色太深,不想改图了,所以加了透明度 */
  image {
    width: 88upx;
    height: 88upx;
    margin-bottom: 14upx;
    border-radius: 50%;
    opacity: .7;
    box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
  }
}
.ad-1{
  width: 100%;
  height: 210upx;
  padding: 10upx 0;
  background: #fff;
  image{
    width:100%;
    height: 100%;
  }
}
/* 秒杀专区 */
.seckill-section{
  padding: 4upx 30upx 24upx;
  background: #fff;
  .s-header{
    display:flex;
    align-items:center;
    height: 92upx;
    line-height: 1;
    .s-img{
      width: 140upx;
      height: 30upx;
    }
    .tip{
      font-size: $font-base;
      color: $font-color-light;
      margin: 0 20upx 0 40upx;
    }
    .timer{
      display:inline-block;
      width: 40upx;
      height: 36upx;
      text-align:center;
      line-height: 36upx;
      margin-right: 14upx;
      font-size: $font-sm+2upx;
      color: #fff;
      border-radius: 2px;
      background: rgba(0,0,0,.8);
    }
    .icon-you{
      font-size: $font-lg;
      color: $font-color-light;
      flex: 1;
      text-align: right;
    }
  }
  .floor-list{
    white-space: nowrap;
  }
  .scoll-wrapper{
    display:flex;
    align-items: flex-start;
  }
  .floor-item{
    width: 150upx;
    margin-right: 20upx;
    font-size: $font-sm+2upx;
    color: $font-color-dark;
    line-height: 1.8;
    image{
      width: 150upx;
      height: 150upx;
      border-radius: 6upx;
    }
    .price{
      color: $uni-color-primary;
    }
  }
}

.f-header{
  display:flex;
  align-items:center;
  height: 140upx;
  padding: 6upx 30upx 8upx;
  background: #fff;
  image{
    flex-shrink: 0;
    width: 80upx;
    height: 80upx;
    margin-right: 20upx;
  }
  .tit-box{
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .tit{
    font-size: $font-lg +2upx;
    color: #font-color-dark;
    line-height: 1.3;
  }
  .tit2{
    font-size: $font-sm;
    color: $font-color-light;
  }
  .icon-you{
    font-size: $font-lg +2upx;
    color: $font-color-light;
  }
}
/* 团购楼层 */
.group-section{
  background: #fff;
  .g-swiper{
    height: 650upx;
    padding-bottom: 30upx;
  }
  .g-swiper-item{
    width: 100%;
    padding: 0 30upx;
    display:flex;
  }
  image{
    width: 100%;
    height: 460upx;
    border-radius: 4px;
  }
  .g-item{
    display:flex;
    flex-direction: column;
    overflow:hidden;
  }
  .left{
    flex: 1.2;
    margin-right: 24upx;
    .t-box{
      padding-top: 20upx;
    }
  }
  .right{
    flex: 0.8;
    flex-direction: column-reverse;
    .t-box{
      padding-bottom: 20upx;
    }
  }
  .t-box{
    height: 160upx;
    font-size: $font-base+2upx;
    color: $font-color-dark;
    line-height: 1.6;
  }
  .price{
    color:$uni-color-primary;
  }
  .m-price{
    font-size: $font-sm+2upx;
    text-decoration: line-through;
    color: $font-color-light;
    margin-left: 8upx;
  }
  .pro-box{
    display:flex;
    align-items:center;
    margin-top: 10upx;
    font-size: $font-sm;
    color: $font-base;
    padding-right: 10upx;
  }
  .progress-box{
    flex: 1;
    border-radius: 10px;
    overflow: hidden;
    margin-right: 8upx;
  }
}
/* 分类推荐楼层 */
.hot-floor{
  width: 100%;
  overflow: hidden;
  margin-bottom: 20upx;
  .floor-img-box{
    width: 100%;
    height:320upx;
    position:relative;
    &:after{
      content: '';
      position:absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(rgba(255,255,255,.06) 30%, #f8f8f8);
    }
  }
  .floor-img{
    width: 100%;
    height: 100%;
  }
  .floor-list{
    white-space: nowrap;
    padding: 20upx;
    padding-right: 50upx;
    border-radius: 6upx;
    margin-top:-140upx;
    margin-left: 30upx;
    background: #fff;
    box-shadow: 1px 1px 5px rgba(0,0,0,.2);
    position: relative;
    z-index: 1;
  }
  .scoll-wrapper{
    display:flex;
    align-items: flex-start;
  }
  .floor-item{
    width: 180upx;
    margin-right: 20upx;
    font-size: $font-sm+2upx;
    color: $font-color-dark;
    line-height: 1.8;
    image{
      width: 180upx;
      height: 180upx;
      border-radius: 6upx;
    }
    .price{
      color: $uni-color-primary;
    }
  }
  .more{
    display:flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex-shrink: 0;
    width: 180upx;
    height: 180upx;
    border-radius: 6upx;
    background: #f3f3f3;
    font-size: $font-base;
    color: $font-color-light;
    text:first-child{
      margin-bottom: 4upx;
    }
  }
}
/* 猜你喜欢 */
.guess-section{
  display:flex;
  flex-wrap:wrap;
  padding: 0 30upx;
  background: #fff;
  .guess-item{
    display:flex;
    flex-direction: column;
    width: 48%;
    // padding-bottom: 40upx;
    &:nth-child(2n+1){
      margin-right: 4%;
    }
  }
  .image-wrapper{
    width: 100%;
    height: 306upx;
    border-radius: 3px;
    overflow: hidden;
    image{
      width: 100%;
      height: 100%;
      opacity: 1;
    }
  }
  .title{
    font-size: $font-lg;
    color: $font-color-dark;
    line-height: 80upx;
  }
  .price{
    font-size: $font-lg;
    color: $uni-color-primary;
    line-height: 1;
  }
}


</style>
